// import React, { Component } from 'react'
// import { ScrollView, StyleSheet, Text, View, Image, TouchableOpacity } from 'react-native';
// import { Button, Drawer, List, InputItem } from '@ant-design/react-native';
// import { NavigationContainer } from '@react-navigation/native'
// import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
// import Ionicons from "react-native-vector-icons/Ionicons"
// import Home from './Home'
// import Play from './components/Play'
// import Love from './components/Love'
// import SearchBar from './components/SearchBar'

// let Tab = createBottomTabNavigator()

// function HomeScreen() {
//     return (
//         <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
//             <Text>Home!</Text>
//         </View>
//     )
// }

// function SettingsScreen() {
//     return (
//         <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
//             <Text>Settings!</Text>
//         </View>
//     )
// }



// export default class App1 extends Component {

//     render() {
//         const sidebar = (
//             <ScrollView style={[styles.container]}>
//                 <List>
//                     <List.Item><Button
//                         type="primary"
//                         size="small"
//                         onPress={() => this.drawer.closeDrawer()}
//                     >
//                         close drawer
//                     </Button></List.Item>
//                     <List.Item><Text>测试</Text></List.Item>
//                     <List.Item><Text>测试</Text></List.Item>
//                     <List.Item><Text>测试</Text></List.Item>
//                     <List.Item><Text>测试</Text></List.Item>
//                 </List>
//             </ScrollView>
//         );
//         return (
//             <Drawer
//                 sidebar={sidebar}
//                 position="left"
//                 open={false}
//                 drawerRef={el => (this.drawer = el)}
//                 onOpenChange={this.onOpenChange}
//                 drawerBackgroundColor="#ccc"
//             >
//                 <View style={{ padding: 15, flexDirection: 'row', justifyContent: 'space-between', height: 60 }}>
//                     <Image style={{ width: 30, height: 30, borderRadius: 15 }} source={require('./img/avatar.jpg')}></Image>
//                     <Text style={{ width: 80, height: 30, textAlign: 'center', lineHeight: 30, fontSize: 20 }}>TFG音乐</Text>
//                     <View style={{ width: 150, height: 30, lineHeight: 30, backgroundColor: '#DCDCDC', borderRadius: 15 }}>
//                         <InputItem></InputItem>
//                     </View>
//                     <TouchableOpacity onPress={() => this.drawer && this.drawer.openDrawer()}>
//                         <Image style={{ width: 30, height: 30, borderRadius: 20 }} source={require('./img/avatar.jpg')} ></Image>
//                     </TouchableOpacity>
//                 </View>
//                 <NavigationContainer>
//                     <Tab.Navigator screenOptions={({ route }) => ({
//                         tabBarIcon: ({ focused, color, size }) => {
//                             let iconName;

//                             if (route.name === '音乐馆') {
//                                 iconName = focused ? 'ios-musical-notes' : 'ios-musical-notes-outline'
//                             } else if (route.name === '正在播') {
//                                 iconName = focused ? 'ios-play' : 'ios-play-outline'
//                             } else if (route.name === '我喜欢') {
//                                 iconName = focused ? 'ios-heart' : 'ios-heart-outline'
//                             } else if (route.name === '制作团队') {
//                                 iconName = focused ? 'ios-person' : 'ios-person-outline'
//                             }

//                             // You can return any component that you like here!
//                             return <Ionicons name={iconName} size={size} color={color} />
//                         },
//                     })} tabBarOptions={{
//                         activeTintColor: 'tomato',
//                         inactiveTintColor: 'gray',
//                     }}>
//                         <Tab.Screen name="音乐馆" component={Home} />
//                         <Tab.Screen name="正在播" component={Play} />
//                         <Tab.Screen name="我喜欢" component={Love} />
//                         <Tab.Screen name="制作团队" component={SettingsScreen} />
//                     </Tab.Navigator>
//                 </NavigationContainer>

//             </Drawer>

//         )
//     }
// }
// const styles = StyleSheet.create({
//     container: {
//         flex: 1,
//     },
// });